<template>
	<div class="message">
		<!-- message区域 -->
		<blockquote>
			<h3>上传头像</h3>
		</blockquote>
			<div style="height: 230px;margin-left: 1.8%;">
				<el-row style="float: left;width: 20%">
					<el-col :span="6">
						<el-upload class="upload_s" :multipe="false" :show-file-list="true" :auto-upload="false" action="uploadAction" :on-change="handleChange" :before-upload="beforeUpload" accept="image/jpg,image/jpeg" list-type="picture" style="border: 3px dashed gainsboro;margin-left: 8.5%;width: 180px;text-align: center;">
							<h2>点击此处</h2>
							<h2>选择头像图片</h2>
						</el-upload>
					</el-col>
				</el-row>
				<el-row style="width: 50%;float: left;">
					<el-button @click="subImg()">修改头像</el-button>
				</el-row>
			</div>
			<blockquote>
				<h3>修改密码</h3>
			</blockquote>
			<el-input placeholder="请输入修改的密码" style="width: 96%;margin-left: 2%;font-size: 18px;" v-model="form.password"></el-input>
			<blockquote>
				<h3>修改名称</h3>
			</blockquote>
			<el-input placeholder="请输入修改的名称" style="width: 96%;margin-left: 2%;font-size: 18px;" v-model="form.nickname"></el-input>
			<blockquote>
				<h3>修改电话</h3>
			</blockquote>
			<el-input placeholder="请输入修改的电话" style="width: 96%;margin-left: 2%;font-size: 18px;" v-model="form.phone"></el-input>
			<el-button type="primary" @click="update()">修改</el-button>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js';
	export default {
		name: 'Message',
		data(){
			return {
				form : {
					nickname : '',
					img : '',
					phone : '',
					password : ''
				},
				fileList : []
			}
		},
		methods:{
			update(){
				// let a = document.getElementsByClassName('el-upload-list__item-thumbnail')[0];
				if( this.form.password != '' ){
					if( this.form.phone != '' && this.form.nickname != '' ){
						this.b();
					}else if( this.form.phone != '' && this.form.nickname == '' ){
						this.c();
					}else if( this.form.phone == '' && this.form.nickname != '' ){
						this.d();
					}
					this.a();
				}
				else if( this.form.password == '' ){
					if( this.form.phone != '' && this.form.nickname != '' ){
						this.b();
					}else if( this.form.phone != '' && this.form.nickname == '' ){
						this.c();
					}else if( this.form.phone == '' && this.form.nickname != '' ){
						this.d();
					}
				}else{
					return false;
				}
			},
			// 修改密码
			a(){
				let pwd = new FormData();
				pwd.append( 'pwd' , this.form.password );
				instance.post( 'http://127.0.0.1:8093/api/fore/user/updatePwd' , pwd , {
					headers : { 'Content-Type' : 'application/json' }
				} ).then( (res)=>{
					// console.log(res.data);
				} ).catch( (error)=>{
					console.log(error);
				} );
			},
			// 修改手机号和昵称
			b(){
				let obj = new FormData();
				obj.append( 'phone' , this.form.phone );
				obj.append( 'nickname' , this.form.nickname );
				instance.post( 'http://127.0.0.1:8093/api/fore/user/updateInfo' , obj , {
					headers : { 'Content-Type' : 'application/json' }
				} ).then( (res)=>{
					// console.log(res);
				} ).catch( (error)=>{
					console.log(error);
				} );
			},
			// 仅修改手机号不修改昵称
			c(){
				let phone = new FormData();
				phone.append( 'phone' , this.form.phone );
				instance.post( 'http://127.0.0.1:8093/api/fore/user/updateInfo' , phone , {
					headers : { 'Content-Type' : 'application/json' }
				} ).then( (res)=>{
					// console.log(res);
				} ).catch( (error)=>{
					console.log(error);
				} );
			},
			// 不修改手机号仅修改昵称
			d(){
				let nickname = new FormData();
				nickname.append( 'nickname' , this.form.nickname );
				instance.post( 'http://127.0.0.1:8093/api/fore/user/updateInfo' , nickname , {
					headers : { 'Content-Type' : 'application/json' }
				} ).then( (res)=>{
					// console.log(res);
				} ).catch( (error)=>{
					console.log(error);
				} );
			},
			// 修改头像
			subImg(){
				if( this.fileList.length != 0 ){
					let formData = new FormData();
					formData.append( 'img' , this.fileList[0].raw );
					var that = this;
					instance.post( 'http://127.0.0.1:8093/api/fore/user/updateImg' , formData , {
						headers : { 'Content-Type' : 'multipart/form-data' }
					} ).then( (res)=>{
						// console.log(res);
						localStorage.setItem( 'nickname' , '' );
						localStorage.setItem( 'phone' , '' );
						localStorage.setItem( 'password' , '' );
						localStorage.setItem( 'token' , '' );
						this.$message.success({
							message : '上传图片成功,请重登',
							offset : 80
						});
					} ).catch( (error)=>{
						console.log(error);
					} );
				}else{
					this.$message.error({
						message : '请上传头像后再提交',
						offset : 80
					});
				}
			},
			beforeUpload( val ){
				console.log(val);
			},
			handleChange( val , valList ){
				this.fileList = valList;
			},
			
		}
	}
</script>

<style scoped>
	.message {
		width: 100%;
		position: absolute;
		top: 80px;
	}
	.el-button{
		margin: 1% 0 0 2%;
	}
	blockquote {
		background-color: #ebeef5;
		color: #88909d;
		border: 1px solid white;
		text-indent: 2em;
	}
</style>
